<template>
    <div class="topBar">
        <div class="context">
            <div class="topBarTitle">
                <ul>
                    <li v-for="(item,index) in topBarTitles" :key="index">
                        <router-link to="/"><a href="">{{ item.t_name }}</a></router-link>
                    </li>
                    <li class="download" @mouseover="appHover" @mouseleave="appLeave">
                        <a href="#">下载app</a>
                        <div class="downloadImg" v-show="showDown">
                            <img src="http://i1.mifile.cn/f/i/17/appdownload/download.png?1"/>
                            <span>小米商城app</span>
                        </div>
                    </li>
                    <li><a href="#">智能生活</a></li>
                    <li><a href="#">Select Location</a></li>
                </ul>
            </div>
            <div class="topBarInfo">
                <router-link to="/Cart"><a href="#" class="cart" @mouseover="cartHover" @mouseleave="cartLeave">
                    <span class="gouWuChe">购物车 ({{ total }})</span>
                </a>
                </router-link>
                <div class="car" v-show="showCar" @mouseover="cartHover" @mouseleave="cartLeave">
                    <div v-if="this.tableData.length>0 ?true : false">
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 360px">
                            <el-table-column align="center" width="50px">
                                <template v-slot="scope">
                                    <el-image
                                            style="width: 50px; height: 50px"
                                            :src="scope.row.prod_pic"
                                    >
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prod="prod_title" width="150" align="left">
                                <template slot-scope="scope">
                                    <sapn style="font-size: 12px">
                                        {{ scope.row.prod_title }}<br>{{ scope.row.prod_version }}
                                    </sapn>
                                </template>
                            </el-table-column>
                            <el-table-column prop="prod_price_current * amount" align="left">
                                <template slot-scope="scope">
                                    <sapn style="font-size: 12px">
                                        {{ scope.row.prod_price_current }}元x {{ scope.row.amount }}
                                    </sapn>
                                </template>
                            </el-table-column>
                            <el-table-column align="left">
                                <template slot-scope="scope">
                                    <sapn style="font-size: 12px">
                                        <el-button icon="el-icon-close" circle @click="del(scope.row)"></el-button>
                                    </sapn>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="padding-top: 30px">
                            <div style="float: left;margin-left:30px;text-align: left">
                                <div style="margin-bottom: 15px">
                                     <span>
                          共 {{ total }} 商品
                        </span>
                                </div>
                                <span style="font-size: 24px;line-height: 1;color: #FF6700">{{ money }}</span>
                                元
                            </div>
                            <div>
                                <div class="anNiu" style="float: right;margin-right: 20px;margin-bottom: 15px">
                                    <div style="padding-right: 20px;padding-top: 25px;">
                                        <router-link to="/Cart" style="color: whitesmoke">去购物车结算</router-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-else>
                        <div style="padding-right: 30px;line-height:150px">
                            <span>购物车中还没有商品，赶紧去选购吧！!</span>
                        </div>
                    </div>

                </div>

            </div>
            <div class="topBarRight" style="float: left;padding-left: 30px">
                <el-dropdown v-show="showE">
      <span class="el-dropdown-link">
          {{ email }}
      </span>
                    <el-dropdown-menu slot="dropdown" style="width: 135px;">
                        <el-dropdown-item style="height: 30px;width: 105px;text-align: center;padding-bottom: 5px   ">
                            <router-link to="/User_Portal">个人中心</router-link>
                        </el-dropdown-item>
                        <br>
                        <el-dropdown-item style="height: 30px;width: 105px;text-align: center;padding-bottom: 5px">评价晒单
                        </el-dropdown-item>
                        <br>
                        <el-dropdown-item style="height: 30px;width: 105px;text-align: center;padding-bottom: 5px">
                            <router-link to="/User_Portal/Wallet">我的钱包</router-link>
                        </el-dropdown-item>
                        <br>
                        <el-dropdown-item style="height: 30px;width: 105px;text-align: center;padding-bottom: 5px">
                            <router-link to="/User_Portal/Profile">小米账户</router-link>
                        </el-dropdown-item>
                        <br>
                        <el-dropdown-item style="height: 30px;width: 105px;text-align: center;padding-bottom: 5px"><a
                                @click="logout">退出登录</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="dengLu" v-if="email">
                    <span><router-link to="/User_Portal/userMessage">消息通知</router-link></span>
                    <span><router-link to="/User_Portal/orderlist">我的订单</router-link></span>
                </div>
                <div class="dengLu" v-else>
                    <span><router-link to="/login">登录</router-link></span>
                    <span><router-link to="/register">注册</router-link></span>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import {getTopList} from "@/api/headerTop"
    import {getToken} from "@/utils/auth";
    import {deleteCart, selectAll} from "../../api/Cart";

    export default {
        name: 'Header',
        data() {
            return {
                t: localStorage.getItem("token"),
                topBarTitles: [],
                showE: false,
                showCar: false,
                showDown: false,
                tableData: [],
            };
        },
        created() {
            this.getProdInfo()
            this.getList();
            this.showEmail();
            // this.
        },
        methods: {
            getProdInfo() {
                selectAll().then(response => {
                    this.tableData = response.message;
                    for (let p of this.tableData) {
                        p.prod_pic = process.env.VUE_APP_BASE_API + p.prod_pic
                    }
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].uid = i;
                    }
                })
            },
            del(row) {
                deleteCart(row.id).then(response => {
                    this.getProdInfo()
                })

            },
            logout() {
                this.$confirm('确定退出系统?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.$store.dispatch('LogOut').then(() => {
                        this.$message({
                            type: 'success',
                            message: '退出成功!'
                        })
                        // location.href = "/"
                        // 从主页退出登录会导致以下报错，解决办法是判断一下是否在主页
                        // Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".
                        this.$router.push("/")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    })
                })
            },
            cartHover() {
                this.showCar = true
            },
            cartLeave() {
                this.showCar = false
            },
            appHover() {
                this.showDown = true
            },
            appLeave() {
                this.showDown = false
            },
            getList() {
                getTopList().then(response => {
                    this.topBarTitles = response;
                })
            },
            showEmail() {
                if (getToken()) {
                    this.showE = true;
                } else {
                    this.showE = false;
                }
            },
        },
        computed: {
            email: function () {
                return this.$store.getters.email;
            },
            money: function () {
                let sum = 0;
                for (let obj of this.tableData) {
                    sum += obj.amount * obj.prod_price_current
                }
                return sum
            },
            total:function (){
                let sum = 0;
                for (let obj of this.tableData) {
                    sum += obj.amount
                }
                return sum
            }
        }
    }
</script>

<style scoped>
    .el-dropdown-link {
        cursor: pointer;
        color: #DADADA;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .topBar {
        position: relative;
        background: #333;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: #b0b0b0;
    }

    .context {
        width: 1226px;
        margin: 0 auto;
    }

    li {
        float: left;
        padding-left: 10px;
        list-style: none;
    }

    li a {
        display: block;
        height: 40px;
        text-decoration: none;
    }

    .download {
        position: relative;
    }

    .downloadImg {
        z-index: 1000;
        position: absolute;
        left: -33px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        font-size: 14px;
        color: #333;
        padding: 15px 15px 0 15px;
        background-color: #fff;
        animation: fadeInDown;
        animation-duration: 0.5s;
    }

    img {
        width: 90px;
        height: 90px;
    }

    .downloadImg span {
        margin-top: 0px;
    }

    span {

    }

    .topBarInfo {
        flex: 2;
        text-align: right;
    }

    .topBarInfo a {
        color: #b0b0b0;
        padding-left: 8px;
        display: block;
        float: right;
        text-decoration: none;
    }

    .cart {
        position: relative;
        width: 120px;
        height: 40px;
        text-align: center;
        background-color: #424242;
        vertical-align: middle;
    }

    .gouWuChe {
        padding-top: 23px;
    }

    .car {
        z-index: 4;
        background-color: #fff;
        width: 370px;
        /*height: 100px;*/
        position: absolute;
        top: 40px;
        right: 314px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        color: #333;
        animation-duration: 0.5s;
        line-height: 0px;
    }

    .cart:hover {
        color: #ff6700;
        background-color: #fff;
    }

    .topBarRight {
        line-height: 40px;
        width: 300px;
    }

    .dengLu {
        float: right;
    }

    .dengLu span {
        display: block;
        float: left;
        padding-left: 8px;
    }

    .anNiu {
        width: 130px;
        height: 48px;
        padding: 0;
        font-size: 14px;
        background-color: #ff6a03;
        border-color: #ff6a03;
        text-align: center;
    }
</style>
